<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>2D转化</title>
		<style>
			div {
				width: 200px;
				height: 200px;
        /* 过渡 */
        transition: all 1s linear 0s;
				background-color: aqua;
			}
			div:hover {
				/* 移动和定位有些像,可以和过渡相互结合,不可以压住盒子 */
				transform: translate(300px,300px);
        /* 只能垂直translateY,水平移动  translateX
        不会影响其他元素的位置,
        translateY(100%) 100% 是相对于自身的高度,和宽度来计算的
        行内标签无效果,行内块可以
        如果是translate 给2个坐标,左上角就到达那个点
        */
			}
		</style>
	</head>
	<body>
		<!-- 盒子水平移动 -->
		<div>水平移动</div>
		<p>我是p标签</p>
	</body>
</html>
